<template>
  <div class="box">
    <div class="box-child">
      <div class="circle complete" />
      <span>已完成</span>
    </div>
    <div class="box-child">
      <div class="circle doing" />
      <span>进行中</span>
    </div>
    <div class="box-child">
      <div class="circle notStart" />
      <span>未开始</span>
    </div>
    <div class="box-child">
      <div class="circle uninvolved" />
      <span>不涉及</span>
    </div>
    <div class="box-child">
      <div class="circle lose" />
      <span>失销</span>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="less" scope>
.box {
  height: 26px;
  span {
    line-height: 26px;
    margin-right: 20px;
  }
  &-child {
    float: left;
  }
}
.circle {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  float: left;
  margin-right: 15px;
  margin-top: 7px;
}
.complete {
  border: 1px solid #09a120;
  background-color: #09a120;
}
.doing {
  border: 1px solid #1890ff;
  background-color: #1890ff;
}
.notStart {
  border: 1px solid #cdced5;
  background-color: #cdced5;
}
.uninvolved {
  border: 1px dashed #000;
  background-color: #cdced5;
}
.lose {
  border: 1px solid #d9001b;
  background-color: #d9001b;
}
</style>
